<template>
  <!-- 图标 -->
  <div>
    <van-icon name="wap-nav" size="2rem" />
  </div>
  <!-- 资料卡 -->
  <div class="Infocard">
    <img src="../assets/icon/3.png" alt="" />
    <div class="My">
      <h2>Koto</h2>
      <p>热爱生活，热爱瑜伽</p>
    </div>
  </div>
  <!-- 成为会员 -->
  <div class="vip">
    <div class="viptext">
      <img
        src="https://s1.aigei.com/prevfiles/a788dd9e014d4fd4b93170e0b362ba12.png?e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:LAd1RTw5QrkugH-eb7j4EA4tAAg="
        alt=""
      />
      <p style="font-size: 4.7vw">成为会员，让一切更简单</p>
      <span>高级会员会让您拥有您参加培训所需的一切</span>
    </div>
  </div>
  <!-- 总运动 -->
  <div class="sports">
    <div class="sportstext">
      <span style="font-size: 4vw">总运动</span>
      <RouterLink to="/SportsView"
        ><span style="font-size: 4vw; color: rgb(149, 134, 251)">查看全部</span>
      </RouterLink>
    </div>
    <div class="cal">
      <h4 class="klul">卡路里</h4>
      <h4 class="calname"><span style="font-size: 5.7vw">500</span>cal</h4>
    </div>
    <div class="kg">
      <h4 class="tiz">体重</h4>
      <h4 class="calname"><span style="font-size: 5.7vw">50</span>kg</h4>
    </div>
  </div>
  <!-- 自动同步 -->
  <div class="sports">
    <div class="sportstext">
      <span style="font-size: 4vw">自动同步</span>
      <span style="font-size: 4vw; color: rgb(149, 134, 251)">查看全部</span>
    </div>

    <van-swipe :loop="false" :width="150" :show-indicators="false">
      <van-swipe-item>
        <div class="type">
          <!-- 复选框 -->
          <van-checkbox
            v-model="checked"
            class="checkbox"
            icon-size="6vw"
            checked-color="rgb(93, 216, 208)"
          ></van-checkbox>

          <img src="../assets/icon/watch.png" alt="" />
          <h4>Apple watch</h4>
          <p>已同步</p>
        </div>
      </van-swipe-item>
      <van-swipe-item
        ><div class="type">
          <!-- 复选框 -->
          <van-checkbox
            v-model="checked"
            class="checkbox"
            icon-size="6vw"
            checked-color="rgb(93, 216, 208)"
          ></van-checkbox>

          <img src="../assets/icon/watch.png" alt="" />
          <h4>Apple watch</h4>
          <p>已同步</p>
        </div></van-swipe-item
      >
      <van-swipe-item
        ><div class="type">
          <!-- 复选框 -->
          <van-checkbox
            v-model="checked"
            class="checkbox"
            icon-size="6vw"
            checked-color="rgb(93, 216, 208)"
          ></van-checkbox>

          <img src="../assets/icon/watch.png" alt="" />
          <h4>Apple watch</h4>
          <p>已同步</p>
        </div></van-swipe-item
      >
      <van-swipe-item
        ><div class="type">
          <!-- 复选框 -->
          <van-checkbox
            v-model="checked"
            class="checkbox"
            icon-size="6vw"
            checked-color="rgb(93, 216, 208)"
          ></van-checkbox>

          <img src="../assets/icon/watch.png" alt="" />
          <h4>Apple watch</h4>
          <p>已同步</p>
        </div></van-swipe-item
      >
    </van-swipe>
  </div>

  <!-- 底部导航栏 -->
  <div>
    <KotoTabbar></KotoTabbar>
  </div>
</template>
<script setup>
import { ref } from 'vue'
// eslint-disable-next-line no-unused-vars
const active = ref(1)
</script>
<style lang="css" scoped>
/* 图标样式 */
.van-icon {
  float: right;
  margin-top: -15vw;
  margin-right: 5vw;
}
/* 资料卡 */
.Infocard {
  position: relative;
  margin-top: 20vw;
}
.Infocard > img {
  position: absolute;
  right: 5vw;
  top: 2vw;
  width: 12vw;
  height: 12vw;
  border-radius: 10px;
}
.My {
  margin-left: 5vw;
}
.My > p {
  color: rgb(132, 143, 155);
}

.vip {
  width: 90vw;
  height: 25vw;
  margin: 0 auto;
  margin-top: 10vw;
  background-color: rgb(149, 134, 251);
  border-radius: 5vw;
  position: relative;
}
.viptext {
  width: 59vw;
  position: absolute;
  right: 3vw;
  color: aliceblue;
}
.viptext > span {
  position: absolute;
  top: 12vw;
}
.viptext > img {
  width: 15vw;
  height: 15vw;
  position: absolute;
  left: -20vw;
  top: 5vw;
}
/* 运动 */
.sports {
  width: 90vw;
  height: 40vw;
  margin: 0 auto;
  margin-top: 10vw;
  border-radius: 5vw;
}
.sportstext {
  display: flex;
  justify-content: space-between;
}
.cal {
  width: 40vw;
  height: 30vw;
  background-color: #000;
  border-radius: 5vw;
  color: white;
  position: relative;
  margin-top: 4vw;
}
.klul {
  position: absolute;
  top: 2vw;
  right: 15vw;
}
.calname {
  position: absolute;
  top: 8vw;
  right: 12vw;
}
.kg {
  width: 40vw;
  height: 30vw;
  background-color: rgb(93, 216, 208);
  border-radius: 5vw;
  color: white;
  position: relative;
  left: 50vw;
  top: -30vw;
}
.tiz {
  position: absolute;
  top: 2vw;
  right: 15vw;
}
.calname {
  position: absolute;
  top: 8vw;
  right: 12vw;
}
.van-swipe__track {
  margin-top: 8vw;
}
.type {
  width: 40vw;
  height: 45vw;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8vw;
  position: relative;
}
.van-swipe-item {
  margin-right: 15vw;
}
.type > p {
  position: absolute;
  bottom: 10vw;
}
.checkbox {
  position: absolute;
  right: 2vw;
  top: 2vw;
}
.van-swipe {
  top: 8vw;
}
</style>
